import React, { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleAddTodo = (e) => {
    e.preventDefault();
    if (inputValue.trim()) {
      setTodos([
        ...todos,
        { id: Date.now(), text: inputValue, completed: false }
      ]);
      setInputValue('');
    }
  };

  const handleToggleComplete = (id) => {
    setTodos(
      todos.map(todo => 
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const handleDeleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div className="container mx-auto px-4 py-8 max-w-md">
      <h1 className="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-6">Todo List</h1>
      
      <form onSubmit={handleAddTodo} className="mb-8">
        <div className="flex">
          <input
            type="text"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            placeholder="添加新任务..."
            className="flex-1 px-4 py-3 rounded-l-lg border-2 border-gray-200 focus:border-blue-400 focus:outline-none transition-all"
          />
          <button
            type="submit"
            className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-r-lg font-medium transition-all"
          >
            添加
          </button>
        </div>
      </form>
      
      <div className="bg-white rounded-xl shadow-lg p-6">
        {todos.length === 0 ? (
          <p className="text-gray-500 italic text-center py-8">暂无任务</p>
        ) : (
          <ul className="space-y-3">
            {todos.map(todo => (
              <li
                key={todo.id}
                className={`flex items-center p-3 ${todo.completed ? 'bg-gray-50' : 'bg-white'} rounded-lg shadow-sm hover:shadow transition-all duration-300 fade-in`}
              >
                <input
                  type="checkbox"
                  checked={todo.completed}
                  onChange={() => handleToggleComplete(todo.id)}
                  className="mr-4 h-5 w-5 text-blue-500 focus:ring-blue-500 border-gray-300 rounded cursor-pointer"
                />
                <span
                  className={`flex-1 text-gray-700 ${todo.completed ? 'line-through text-gray-400' : ''} transition-all`}
                >
                  {todo.text}
                </span>
                <button
                  onClick={() => handleDeleteTodo(todo.id)}
                  className="text-gray-400 hover:text-red-500 transition-colors"
                >
                  <i className="fa fa-trash-o"></i>
                </button>
              </li>
            ))}
          </ul>
        )}
        
        <div className="mt-6 pt-4 border-t border-gray-100 flex justify-between items-center">
          <span className="text-sm text-gray-500">
            {todos.filter(todo => !todo.completed).length} 个未完成任务
          </span>
          {todos.some(todo => todo.completed) && (
            <button
              onClick={() => setTodos(todos.filter(todo => !todo.completed))}
              className="text-sm text-blue-500 hover:text-blue-700 transition-colors"
            >
              清除已完成
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

export default App;    